<script setup>
import { ref } from 'vue'
import { studentOptions } from '../../services/student'

const emit = defineEmits(['search'])

// 搜索表单
const searchForm = ref({
  keyword: '',
  school: '',
  class: '',
  teacher: '',
  expireDateRange: []
})

// 搜索选项
const schoolOptions = studentOptions.schools
const classOptions = studentOptions.classes
const teacherOptions = studentOptions.teachers

// 搜索方法
const handleSearch = () => {
  emit('search', { ...searchForm.value })
}

// 重置搜索条件
const handleReset = () => {
  searchForm.value = {
    keyword: '',
    school: '',
    class: '',
    teacher: '',
    expireDateRange: []
  }
  emit('search', {})
}
</script>

<template>
  <div class="search-bar">
    <el-form :model="searchForm" inline>
      <el-form-item label="关键词搜索">
        <el-input
          v-model="searchForm.keyword"
          placeholder="姓名/账号/手机号"
          clearable
          @keyup.enter="handleSearch"
        />
      </el-form-item>
      
      <el-form-item label="学校">
        <el-select
          v-model="searchForm.school"
          placeholder="全部"
          clearable
          style="width: 180px"
        >
          <el-option
            v-for="item in schoolOptions"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      
      <el-form-item label="班级">
        <el-select
          v-model="searchForm.class"
          placeholder="全部"
          clearable
          style="width: 150px"
        >
          <el-option
            v-for="item in classOptions"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      
      <el-form-item label="老师">
        <el-select
          v-model="searchForm.teacher"
          placeholder="全部"
          clearable
          style="width: 120px"
        >
          <el-option
            v-for="item in teacherOptions"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      
      <el-form-item label="到期时间">
        <el-date-picker
          v-model="searchForm.expireDateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.search-bar {
  margin-bottom: 16px;
  padding: 16px;
  background-color: var(--el-fill-color-light);
  border-radius: 4px;
  border: 1px solid var(--el-border-color-lighter);
}

:deep(.el-form-item__label) {
  color: var(--el-text-color-regular);
}

:deep(.el-input__wrapper),
:deep(.el-select .el-input__wrapper),
:deep(.el-date-editor.el-input__wrapper) {
  background-color: var(--el-bg-color);
  box-shadow: 0 0 0 1px var(--el-border-color) inset;
}

:deep(.el-input__inner) {
  color: #e6e8eb;
}

:deep(.el-range-input) {
  color: #e6e8eb;
}

:deep(.el-range-separator) {
  color: var(--el-text-color-secondary);
}

:deep(.el-select__popper) {
  background-color: #1d2937;
  border: 1px solid #374151;
}

:deep(.el-select-dropdown__item) {
  color: #e6e8eb;
}

:deep(.el-select-dropdown__item.hover),
:deep(.el-select-dropdown__item:hover) {
  background-color: var(--el-fill-color-light);
}

:deep(.el-button) {
  background-color: var(--el-button-bg-color);
  border-color: var(--el-button-border-color);
}

:deep(.el-button--primary) {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
}

:deep(.el-button:hover) {
  background-color: #283547;
  border-color: #409eff;
}
</style>
